<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PageSaver</title>
    <link rel="stylesheet" href="css/popup.css">
    <!-- 添加必要的依赖 -->
    <script src="vendor.bundle.js"></script>
    <script src="popup.bundle.js" defer></script>
</head>
<body>
    <div class="ps-container">
        <!-- 工具栏 -->
        <div class="ps-toolbar">
            <div class="ps-left-tools">
                <button id="renderMode" class="ps-button ps-active">渲染模式</button>
                <button id="sourceMode" class="ps-button">源码模式</button>
            </div>
            <div class="ps-right-tools">
                <button id="downloadBtn" class="ps-button" title="下载">
                    <svg class="ps-icon" viewBox="0 0 24 24">
                        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                    </svg>
                </button>
                <button id="shareBtn" class="ps-button" title="分享到Gitee">
                    <svg class="ps-icon" viewBox="0 0 24 24">
                        <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/>
                    </svg>
                </button>
                <button id="copyBtn" class="ps-button" title="复制">
                    <svg class="ps-icon" viewBox="0 0 24 24">
                        <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                    </svg>
                </button>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="ps-main-content">
            <!-- 目录区域 -->
            <div id="tocPanel" class="ps-toc-panel">
                <div class="ps-toc-header">
                    <h3>目录</h3>
                    <button id="toggleToc" class="ps-toggle-btn">
                        <span class="ps-arrow">›</span>
                    </button>
                </div>
                <div id="tocContent" class="ps-toc-content"></div>
            </div>

            <!-- Markdown内容区域 -->
            <div id="markdownContent" class="ps-markdown-content">
                <!-- 源码编辑区域 -->
                <textarea id="sourceEditor" class="ps-source-editor" style="display: none;"></textarea>
                <!-- 渲染区域 -->
                <div id="renderContent" class="ps-render-content"></div>
            </div>
        </div>
    </div>

    <!-- Gitee配置对话框 -->
    <div id="giteeConfigDialog" class="ps-dialog" style="display: none;">
        <div class="ps-dialog-content">
            <h2>Gitee 配置</h2>
            <div class="ps-form-group">
                <label for="giteeToken">访问令牌</label>
                <input type="password" id="giteeToken" class="ps-input" placeholder="请输入Gitee访问令牌">
            </div>
            <div class="ps-form-group">
                <label for="giteeOwner">仓库所有者</label>
                <input type="text" id="giteeOwner" class="ps-input" placeholder="请输入仓库所有者">
            </div>
            <div class="ps-form-group">
                <label for="giteeRepo">仓库名称</label>
                <input type="text" id="giteeRepo" class="ps-input" placeholder="请输入仓库名称">
            </div>
            <div class="ps-dialog-footer">
                <button id="saveGiteeConfig" class="ps-button ps-primary">保存</button>
                <button id="cancelGiteeConfig" class="ps-button">取消</button>
            </div>
        </div>
    </div>

    <!-- 目录选择对话框 -->
    <div id="directoryDialog" class="ps-dialog" style="display: none;">
        <div class="ps-dialog-content">
            <h2>选择保存目录</h2>
            <div class="ps-directory-list" id="directoryList">
                <!-- 目录列表将通过JavaScript动态生成 -->
            </div>
            <div class="ps-form-group">
                <input type="text" id="newDirectory" class="ps-input" placeholder="输入新目录名称">
                <button id="createDirectory" class="ps-button ps-primary">新建目录</button>
            </div>
            <div class="ps-dialog-footer">
                <button id="confirmDirectory" class="ps-button ps-primary">确认</button>
                <button id="cancelDirectory" class="ps-button">取消</button>
            </div>
        </div>
    </div>
</body>
</html> 